<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>省市二级联动可扩展性</title>
    <style type="text/css">
     #divProCity
     {
         position:absolute;
        width:350px;
        max-height:220px;
        height:auto;
        display:none;
        border:1px solid #d3d3d3;
        z-index:100;
        overflow:auto;
	    overflow-x:hidden;
     }
     .headMenu
     {
        height: 34px;
	    background: #f6f6f6;
	    margin: 0;
	    padding: 0;
     }
     .headMenu li
     {
        float:left;
        text-align:center;
        width:60px;
        height: 32px;
        list-style:none;
        background: #f6f6f6;
	    line-height: 32px;
	    font-size: 13px;
	    cursor: pointer;
     }
     .headMenu li.liDefault
     {
        background:  #F60;
	    color: #fff;
	    margin: 0;
	    padding: 0;  
     }
     .liDiv1, .liDiv2
    {
	    height: auto;
	    min-height:30px;
	    border-top: 2px solid #F60;
	    margin-top: -2px;
    }
     .liDiv3
    {
	    height:auto;
	    min-height:30px;
	    max-height:200px;
	    border-top: 2px solid #F60;
	    margin-top: -2px;
    }
    .liDiv2,.liDiv3
    {
	    display: none;
    }
    .liDiv1 ul, .liDiv2 ul
    {
	    padding: 2px;
	    margin: 0;
	    clear:both;
    }
    
     .liDiv3 ul
    {
	    padding: 2px;
	    margin: 0;
	    clear:both;
    }
    .liDiv1 ul li, .liDiv2 ul li
    {
    	float:left;
	    font-size: 14px;
	    width:60px;
	    line-height:180%;
	    list-style:none;
	    color: #252525;
	    margin: 0 4px;
	    cursor:pointer;
	    text-align:center;
    }
    
    .liDiv3 ul li
    {
    	float:left;
	    font-size: 13px;
	    line-height: 150%;
	    color: #252525;
	    margin: 1px 3px;
	    list-style: none;
	    cursor:pointer;
	    text-align:center;
    }
    .liDiv1 ul li:hover, .liDiv2 ul li:hover,.liDiv3 ul li:hover
    {
	    color: #8b51cb;
	    cursor: pointer;
	    text-decoration: none;
	    padding: 0;
	    background:#ccc;
    }

    .btn_img1
    {
    	width:20px;
    	vertical-align:middle;
        margin-left:-31px;
        border:none;
        outline:none;
        height:10px;
        cursor:pointer;
        background:url(images/img_1.png) no-repeat center center;
        z-index:10;
    }

    .btn_img2
    {
        margin-left:-31px;
        margin-bottom:2px;
        width:20px;
        height:10px;
        border:none;
        outline:none;
    	vertical-align:middle;
        cursor:pointer;
        background:url(images/img_2.png) no-repeat center center;
        z-index:10;
    }

    </style>
    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<label>选择是否出国：</label>
<input type="radio" name="radio1" value="1"  />国内
<input type="radio" name="radio1"  value="2" />国外<br /><br />
<label>查询省市联动：</label>
<input type="text" id="txt_proCity" onkeyup="GetOutCounty()" readonly="readonly" runat="server" />
<input type="button"  id="btnImg"  class="btn_img1" name="img1"  onclick="changeImg()" /><br />
<label>显示位置：</label><br />
<div id="divProCity">
    <ul class="headMenu">
            <li class="liDefault">省份</li>
            <li>城市</li> 
            <li>国外</li> 
    </ul>
    <div class="liDiv1">
           <ul>
                    <li>福州福州</li>
                    <li>福州福州</li>
                    <li>福福州州</li>
                    <li>福州福州</li>
                    <li>福福州州</li>
                    <li>福建</li>
                    <li>安徽</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福建</li>
                    <li>安徽</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福建</li>
                    <li>安徽</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福建</li>
                    <li>安徽</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福建</li>
                    <li>安徽</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福建</li>
                    <li>安徽</li>
                    <li>福州</li>
                    <li>福州</li>
                    <li>福州</li>
                </ul>
    </div>
    <div class="liDiv2">
          <p style="text-align:center;color:#F60"><strong>请先选择省份！</strong></p>
    </div>
    <div class="liDiv3">
          <!--<p style="text-align:center;color:#F60"><strong>请先选择是否出国！</strong></p>-->
          <ul>
              <li>特克斯和凯科斯群岛</li>
              <li>土库曼斯坦</li>
              <li>图瓦卢</li>
              <li>乌干达</li>
              <li>乌克兰</li> 
              <li>马其顿</li>
              <li>埃及</li>
              <li>坦桑尼亚</li> 
              <li>美属维尔京群岛</li>
              <li>乌拉圭</li>
              <li>布基纳法索</li>
              <li>乌兹别克斯坦</li>
              <li>委内瑞拉</li>
              <li>瓦利斯和富图纳群岛</li>
              <li>西萨摩亚</li> 
              <li>也门</li>
              <li>南斯拉夫</li>
              <li>布基纳法索</li>
              <li>乌兹别克斯坦</li>
              <li>委内瑞拉</li>
              <li>瓦利斯和富图纳群岛</li>
              <li>西萨摩亚</li> 
              <li>也门</li>
              <li>南斯拉夫</li> 
              
              <li>特克斯和凯科斯群岛</li>
              <li>土库曼斯坦</li>
              <li>图瓦卢</li>
              <li>乌干达</li>
              <li>乌克兰</li> 
              <li>马其顿</li>
              <li>埃及</li>
              <li>坦桑尼亚</li> 
              <li>美属维尔京群岛</li>
              <li>乌拉圭</li>
              <li>布基纳法索</li>
              <li>乌兹别克斯坦</li>
              <li>委内瑞拉</li>
              <li>瓦利斯和富图纳群岛</li>
              <li>西萨摩亚</li> 
              <li>也门</li>
              <li>南斯拉夫</li>
              <li>布基纳法索</li>
              <li>乌兹别克斯坦</li>
              <li>委内瑞拉</li>
              <li>瓦利斯和富图纳群岛</li>
              <li>西萨摩亚</li> 
              <li>也门</li>
              <li>南斯拉夫</li>                           
          </ul>
     </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#divProCity ul.headMenu li').click(function () {
            var index = $(this).index();
            //国外点击无效
            if (index == 2) {
                return false;
            }
            $(this).addClass("liDefault").siblings().removeClass("liDefault");
            $('#divProCity').children('div').eq(index).show().siblings('div').hide();
        });
    })

    //选择国内国外
    $("[name$=radio1]").click(function () {
        var value = $(this).val();
        //更改国外国内时重置省市的值为空，图标还原,关闭弹层,判断输入框是否可以编辑
        $("input[id*=txt_proCity]").val('');
        $('#btnImg').attr("class", "btn_img1");
        $('#btnImg').attr("name", "img1"); //给切换图片做标记的
        $('#divProCity').css("display", "none");
        if (value == 2) {//国外
            $('#txt_proCity').removeAttr("readonly");
        }
        else {
            $('#txt_proCity').attr("readonly", "readonly");
        }
    })

    //出国模糊查询
    function GetOutCounty() {
        //border: 1px solid #d3d3d3;background: #f6f6f6;备用颜色background: #f7f7f7;
        var txt = $("input[id*=txt_proCity]");
        if (txt.val().trim()== "") {
            return false;
        }
        var height = txt.height();
        var x = txt.offset().top;
        var y = txt.offset().left;
        $('#divProCity').css({ display: "block", left: y + "px", top: x + height + 8 + "px" });
        $('#divProCity ul.headMenu li').eq(2).show().css("width", "70px").addClass("liDefault").siblings().hide();
        $('#divProCity').children('div').eq(2).show().siblings('div').hide();
        $('#btnImg').attr("class", "btn_img2");
        $('#btnImg').attr("name", "img2"); //给切换图片做标记的
        //模糊查询相关代码
        var ss = "<ul><li>福州福州</li><li>福州福州</li><li>福福州州</li><li>福州福州</li></ul>";
        $('.liDiv3').html('');
        $('.liDiv3').html(ss);
    }

    //根据国内国外 点击右边按钮加载
    function changeImg() {
        var _selectValue = $("input:checked[name$=radio1]").val();
        if (_selectValue == "" || _selectValue==undefined) {
            alert("请先选择是否出国！");
            return false;
        }
        var txt = $("input[id*=txt_proCity]");
        var height = txt.height();
        var x = txt.offset().top;
        var y = txt.offset().left;
        
        var name = $('#btnImg').attr("name");
        if (name == "img1") {
            $('#btnImg').attr("class", "btn_img2");
            $('#btnImg').attr("name", "img2");
            $('#divProCity').css({ display: "block", left: y + "px", top: x + height + 8 + "px" });
            //1国内 2国外 控制面板菜单项显示
            if (_selectValue == 1) {
                $('#divProCity ul.headMenu li').eq(2).hide().siblings().show();
                $('#divProCity').children('div').eq(0).show().siblings('div').hide();
            }
            else {
                $('#divProCity ul.headMenu li').eq(2).show().css("width","70px").addClass("liDefault").siblings().hide();
                $('#divProCity').children('div').eq(2).show().siblings('div').hide();
            }
        }
        else {
            $('#btnImg').attr("class", "btn_img1");
            $('#btnImg').attr("name", "img1");
            $('#divProCity').css("display","none");
        }
    }
</script>
</body>
</html>
